//载入公共变量
@import "global.less";
//background: transparent; 透明色
//布局
#app {
  display: flex;
  min-height: 100vh;
  flex-flow: column;
}
#main {
  flex: 1;
}
//分类、时间
.tile__category,
.tile__timestamp {
  color: @font-color-assist;
}

//动画
//图片动画
.tile {
  img {
    width: 100%;
    height: 100%;
    transition: @img-tra;
  }
}
.tile:hover img {
  transform: scale(1.03);
  transition: @img-tra;
}

//背景
.everdayfeed {
  padding-bottom: 80px;
  overflow: hidden;
  background-color: #f5f5f7;
  margin-top: 0;
}

//模块
.section-content {
  margin-left: auto;
  margin-right: auto;
  width: 980px;
}

//标题
.section-head {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 700;
  letter-spacing: 0.004em;
  margin-bottom: 24px;
}

.tile {
  background-color: #fff;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  z-index: 0;
  position: relative;
  .tile__media {
    direction: revert;
  }
  .tile__description {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
  }
}

//图片
.tile__media {
  position: relative;
  z-index: 0;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
}

//标签
.tile__category {
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  span {
    margin-right: 10px;
  }
}

//标题
.tile__headline {
  color: @font-color-main;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

//时间
.tile__timestamp {
  font-size: 14px;
  line-height: 1.28577;
  font-weight: 600;
  letter-spacing: -0.016em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

//特写下的链接
.nr-cta-primary-dark {
  border-radius: 30px;
  display: inline-block;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
    border-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
    color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms;
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 600;
  letter-spacing: -0.022em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
  border: 2px solid;
  padding: 10px 24px 9px;
  border-color: #f5f5f7;
  color: #f5f5f7;
}

//更多新闻
.section-tiles {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0;
  .tile-item {
    position: relative;
  }
}

.tile.tile {
  height: 100%;
}

.tile.tile-list {
  border-radius: revert;
  overflow: revert;
  z-index: revert;
  position: revert;
  background-color: transparent;
  flex-direction: row;
  width: 457px;
}

//------------------------文章用

.component {
  margin-left: auto;
  margin-right: auto;
  width: 980px;
}
.component {
  margin-top: 44px;
  margin-bottom: 44px;
}



.component-content {
  margin-left: auto;
  margin-right: auto;
  width: 653px;
}
//图片
.image-sharesheet {
  display: table;

  overflow: hidden;
  z-index: 0;
  position: relative;
}

//图片描述
.image-description {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: #6e6e73;
  margin: 16px 16px 0;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.sharesheet {
  color: @font-color-assist;
  position: relative;
}

.sharesheet-options {
  display: inline-flex;
  justify-content: flex-start;
  height: 71px;
  vertical-align: middle;
  margin: 0;
  overflow: hidden;
}
.social-option {
  > button {
    font-size: 24px;
    line-height: 24px;
    height: 24px;
    padding: 6px;
    margin: -6px 3px;
    outline: none !important;
    background-color: #fffafa00 !important;
  }
}

//按钮
.view-archive-wrapper {
  margin-top: 40px;
  font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  letter-spacing: 0em;
  font-size: 17px;
  line-height: 1.23536;
  font-weight: 500;
  text-align: center;
  .nr-cta-primary-light {
    border-radius: 30px;

    transition: background-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
      border-color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms,
      color 300ms cubic-bezier(0.4, 0, 0.25, 1) 0ms;
    font-size: 17px;
    line-height: 1.23536;
    font-weight: 600;
    letter-spacing: -0.022em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica",
      "Arial", sans-serif;
    border: 2px solid;
    padding: 10px 24px 10px;
    border-color: #1d1d1f;
    color: #161617;
  }
}

//图标
.blank_icon {
  background-color: #161617;
  border-radius: 100%;
  padding: 4px;
  color: #f5f5f7;
  font-size: 12px;
}
.white_icon {
  border-radius: 100%;
  padding: 4px;
  color: #161617;
  background-color: #f5f5f7;
  font-size: 12px;
}

/*列表页*/
.results__content {
  margin-left: auto;
  margin-right: auto;
  width: 980px;
}

//移动适配
@media only screen and (max-width: 1068px) {
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
  .section-head {
    font-size: 28px;
    line-height: 1.14286;
    font-weight: 700;
    letter-spacing: 0.007em;
  }
  .tile.tile-list {
    flex-direction: row;
    width: 631px;
  }
  //------------文章用
  .component {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
  .component {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  .component-content {
    width: 576px;
  }
  /*列表页*/
  .results__content {
    margin-left: auto;
    margin-right: auto;
    width: 692px;
  }
}

@media only screen and (max-width: 734px) {
  .section-content {
    max-width: 366px;
  }
  .section-content {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;
  }
  .section-content {
    max-width: 366px;
  }
  //-----------文章用
  .component {
    max-width: 414px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .component {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .component-content {
    width: 87.5%;
  }
  /*列表页*/
  .results__content {
    margin-left: auto;
    margin-right: auto;
    width: 87.5%;
  }
}
